<template>
  <div class="add-favor-container">
    <div class="add-favor-form">
      <el-form
        ref="shipFavorFormRef"
        label-position="right"
        label-width="85px"
        :model="shipFavorForm"
        :rules="rules"
      >
        <el-form-item label="选择分组" prop="groupId">
          <el-select
            v-model="shipFavorForm.groupId"
            class="group-select"
            placeholder="请选择分组"
          >
            <el-option
              v-for="item in groups"
              :key="item.id"
              :label="item.groupName"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-button
            type="plaint"
            class="add-group-btn"
            icon="el-icon-plus"
            @click="addOrEditGroupShow = true"
          ></el-button>
        </el-form-item>
        <el-form-item label="自定义船名" prop="customShipName">
          <el-input
            v-model="shipFavorForm.customShipName"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="shipFavorForm.remark"
            type="textarea"
            maxlength="100"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-list">
      <el-button type="primary" class="btn btn-ok" @click="okClick">
        确定
      </el-button>
      <el-button type="primary" class="btn btn-cancel" @click="cancelClick">
        取消
      </el-button>
    </div>

    <el-dialog
      ref="addOrEditGroupForm"
      title="添加分组"
      :visible.sync="addOrEditGroupShow"
      :append-to-body="true"
      :close-on-click-modal="false"
      :modal="true"
      width="400px"
      custom-class="shipping-online-dialog"
    >
      <el-form
        ref="groupFormRef"
        :model="groupForm"
        :rules="groupFormRules"
        label-width="100px"
      >
        <el-form-item label="分组名称" prop="name">
          <el-input v-model="groupForm.name" maxlength="20"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelClickEditGroupShow">取 消</el-button>
        <el-button type="primary" @click="saveGroupInfo"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getMyGroupList, addShipFavor, addFavorGroup } from "@/api/shipGroup";
export default {
  props: {
    shipInfo: {
      type: Object,
    },
  },
  data() {
    return {
      shipFavorForm: {
        groupId: "",
        customShipName: "",
        remark: "",
      },
      groups: [
        // { label: "分组1", value: "1" },
        // { label: "分组2", value: "2" },
        // { label: "分组3", value: "3" },
      ],
      rules: {
        groupId: [{ required: true, message: "请选择分组", trigger: "blur" }],
        //  customShipName: [
        //   { required: true, message: "请输入自定义船名", trigger: "blur" },
        //   { min: 3, max: 5, message: "长度在 3 到 20 个字符", trigger: "blur" },
        // ],
      },
      addOrEditGroupShow: false,
      groupForm: {
        name: "",
      },
      groupFormRules: {
        name: [
          {
            required: true,
            message: "请输入分组名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getGroupList();
    this.shipFavorForm.customShipName = this.shipInfo.shipName;
  },
  methods: {
    // 获取分组列表
    getGroupList() {
      getMyGroupList().then((res) => {
        if (res.result) {
          this.groups = res.result;
        }
      });
    },
    // 保存分组信息
    saveGroupInfo() {
      this.$refs.groupFormRef.validate((valid) => {
        if (valid) {
          // this.groups.push({
          //   label: this.groupForm.name,
          //   value: 8,
          // });
          addFavorGroup({
            groupName: this.groupForm.name,
          }).then((res) => {
            if (res.success) {
              this.$message.success("添加分组成功！");
              this.getGroupList();
              this.$emit("group-added");
            } else {
              this.$message.warning("添加分组失败！");
            }
          });

          this.addOrEditGroupShow = false;
          this.groupForm.name = "";
        }
      });
    },
    cancelClick() {
      this.$emit("cancel");
    },
    okClick() {
      // if (!this.shipInfo) {
      //   this.$message.warning("请选择要关注的船舶！");
      // }
      this.$refs.shipFavorFormRef.validate((valid) => {
        if (valid) {
          // 调用接口保存数据
          addShipFavor({
            customShipName: this.shipFavorForm.customShipName,
            groupId: this.shipFavorForm.groupId,
            remark: this.shipFavorForm.remark,
            shipId: this.shipInfo.shipId, // "1593134439886155778",
          }).then((res) => {
            if (res.success) {
              this.$emit("ok");
              this.$message.success("关注船舶成功！");
            } else {
              this.$message.warning("关注船舶失败！");
            }
          });
        } else {
          return false;
        }
      });
    },
    cancelClickEditGroupShow() {
      this.$refs.groupFormRef.resetFields();
      this.addOrEditGroupShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.add-favor-container {
  padding: 20px 9px;

  .add-favor-form {
    // display: flex;
    // justify-content: center;
    padding: 10px 21px 29px 21px;
    border-bottom: 1px solid #d8d8d8;

    .group-select {
      width: 234px;
    }
    .add-group-btn {
      margin-left: 10px;
    }
  }

  .btn-list {
    display: flex;
    justify-content: center;
    margin-top: 19px;
    .btn {
      padding: 8px 11px;
      width: 80px;
    }
    .btn-ok {
      background: #004aaa;
      border-color: #004aaa;
      margin-right: 37px;
    }
    .btn-cancel {
      background: #d8d8d8;
      border-color: #d8d8d8;
    }
  }
}
</style>
